<script setup lang="ts">
  import { nextTick, ref, watch } from 'vue'
  import { useSendInviteCodeRecordsService } from '../services'
  import Pagination from '@/components/Pagination/index.vue'
  import HStatus from '@/components/common/status/HStatus.vue'
  const props = defineProps({
    modelValue: {
      type: Boolean,
      default: false,
    },
  })

  const emits = defineEmits<{
    (e: 'update:modelValue', value: boolean): void
  }>()

  // 分页组件实例
  const paginationRef = ref<InstanceType<typeof Pagination> | null>(null)

  // 使用服务
  const { loading, getList, total, recordList } = useSendInviteCodeRecordsService()

  // 组装filter
  const getFilter = async () => {
    const result = {
      limit: 50,
      page: 1,
    }
    await nextTick()
    if (paginationRef.value) {
      result.limit = paginationRef.value.size
      result.page = paginationRef.value.current
    }
    return result
  }

  // 弹窗显示状态
  const visible = ref(false)

  // 关闭弹窗事件
  const onClose = () => {
    visible.value = false
    emits('update:modelValue', visible.value)
  }

  // 获取列表
  const __getList = async () => {
    const filter = await getFilter()
    getList(filter.limit, filter.page)
  }

  watch(
    () => props.modelValue,
    (value) => {
      visible.value = value
      if (value) {
        __getList()
      }
    },
  )
</script>

<template>
  <div>
    <h-dialog title="邀请记录" v-model="visible" @close="onClose" :width="800" :loading="loading">
      <div class="invite_record">
        <div class="table">
          <el-table :data="recordList" :border="true">
            <el-table-column prop="receivePhone" label="手机号码" />
            <el-table-column prop="success" label="发送状态">
              <template #default="scope">
                <HStatus v-if="scope.row.success">成功</HStatus>
                <HStatus v-else type="error">失败</HStatus>
              </template>
            </el-table-column>
          </el-table>
        </div>
        <div class="pagination">
          <Pagination
            ref="paginationRef"
            :list_total="total"
            @size-change="__getList"
            @current-change="__getList"
          />
        </div>
      </div>
    </h-dialog>
  </div>
</template>

<style scoped lang="scss">
  .invite_record {
    display: flex;
    flex-direction: column;
    row-gap: 12px;
    height: 100%;

    .table {
      max-height: calc(100% - 40px);
    }

    .pagination {
      display: flex;
      justify-content: flex-end;
    }
  }
</style>
